<script setup lang="ts">
import CheckOutSetting from '@/pages/cashier/components/CheckOutSetting.vue'
import DirectOrdering from '@/pages/cashier/components/DirectOrdering.vue'
import GeneralOrdering from '@/pages/cashier/components/GeneralOrdering.vue'
import OrderingFormat from '@/pages/cashier/components/OrderingFormat.vue'
import TableSetting from '@/pages/cashier/components/TableSetting.vue'
import TablesideOrdering from '@/pages/cashier/components/TablesideOrdering.vue'

function handleClickLeft() {
  uni.navigateBack()
}
const { ctx } = getCurrentInstance()
const contentHeight = ref(0)
onReady(() => {
  ctx.$uv.getRect('.content-container').then((res) => {
    // 减掉导航
    contentHeight.value = res.height - 42
  })
})
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="收银基础设置" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <view class="content-container flex-1">
      <wd-tabs custom-class="!bg-transparent hide-scrollbar" swipeable animated>
        <wd-tab title="通用点餐">
          <scroll-view
            :style="{ height: `${contentHeight}px` }"
            class="box-border overflow-hidden p-[10px] pt-0"
            scroll-y
            :show-scrollbar="false"
          >
            <general-ordering />
          </scroll-view>
        </wd-tab>
        <wd-tab title="点餐形式">
          <scroll-view
            :style="{ height: `${contentHeight}px` }"
            class="box-border overflow-hidden p-[10px] pt-0"
            scroll-y
            :show-scrollbar="false"
          >
            <ordering-format />
          </scroll-view>
        </wd-tab>
        <wd-tab title="桌台点餐">
          <scroll-view
            :style="{ height: `${contentHeight}px` }"
            class="box-border overflow-hidden p-[10px] pt-0"
            scroll-y
            :show-scrollbar="false"
          >
            <tableside-ordering />
          </scroll-view>
        </wd-tab>
        <wd-tab title="直接点餐">
          <scroll-view
            :style="{ height: `${contentHeight}px` }"
            class="box-border overflow-hidden p-[10px] pt-0"
            scroll-y
            :show-scrollbar="false"
          >
            <direct-ordering />
          </scroll-view>
        </wd-tab>
        <wd-tab title="桌台">
          <scroll-view
            :style="{ height: `${contentHeight}px` }"
            class="box-border overflow-hidden p-[10px] pt-0"
            scroll-y
            :show-scrollbar="false"
          >
            <table-setting />
          </scroll-view>
        </wd-tab>
        <wd-tab title="结账">
          <scroll-view
            :style="{ height: `${contentHeight}px` }"
            class="box-border overflow-hidden p-[10px] pt-0"
            scroll-y
            :show-scrollbar="false"
          >
            <check-out-setting />
          </scroll-view>
        </wd-tab>
        <wd-tab title="接单/订单" />
      </wd-tabs>
    </view>

    <view class="flex border-t-1 border-border border-t-solid bg-white p-4">
      <wd-button type="primary" :round="false" class="flex-1">保存</wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
:deep(.wd-tabs__nav) {
  background-color: transparent;
}
</style>
